import css2canvas from "../../utils/css2canvas"

Page({
  /**
   * 页面的初始数据
   */
  data: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var canvasShow = wx.createCanvasContext("canvas-show")
    let ctx = new css2canvas(canvasShow)
    ctx
      .drawingView([
        {
          type: "roundRect",
          x: 0,
          y: 0,
          width: 560,
          height: 822,
          // background: "#ffffff",
          borderWidth: 1,
          borderRadius: 0,
          clip: false
        },
        {
          type: "text",
          x: 55,
          y: 30,
          color: "#999999",
          fontSize: 22,
          baseline: "top",
          content: "2019/07/29"
        },
        {
          type: "text",
          x: 55,
          y: 70,
          color: "#1ECFBB",
          fontSize: 28,
          baseline: "top",
          content: "今日 · 推荐"
        },
        {
          type: "image",
          imgUrl: "../../assets/default_image.jpg",
          x: 55,
          y: 128,
          width: 460,
          height: 460
        },
        {
          type: "tag",
          x: 54,
          y: 618,
          content: "店铺名称",
          color: "#ffffff",
          fontSize: 24,
          background: "#1ED0BC",
          radiusTop: 0,
          radiusRight: 30,
          radiusBottom: 0,
          radiusLeft: 30,
          padding: 12,
          paddingLeft: 15,
          paddingRight: 15
        },
        {
          type: "text",
          x: 386,
          y: 772,
          content: "长按识别二维码",
          color: "#999999",
          fontSize: 20,
          textAlign: "left",
          baseline: "top"
        },
        {
          type: "image",
          imgUrl: "../../assets/default_image.jpg",
          x: 392,
          y: 626,
          width: 125,
          height: 125
        },
        {
          type: "text",
          x: 55,
          y: 690,
          width: 334,
          content: " 拼团 这个是商品名称这个是商品名称这个是商品名称这个是商品名称这个是商品名称这个是商品名称",
          color: "#666666",
          fontSize: 24,
          textAlign: "left",
          overflow: "warp",
          maxLine: 2,
          lineHeight: 1.5
        },
        {
          type: "tag",
          x: 55,
          y: 688,
          content: "拼团",
          background: "#ffffff",
          padding: 5,
          paddingTop: 2,
          paddingBottom: 2,
          color: "#ffffff",
          fontSize: 20,
          borderWidth: 2,
          borderRadius: 10
        },
        {
          type: "tag",
          x: 55,
          y: 688,
          background: "rgba(24,209,189,.5)",
          content: "拼团",
          padding: 5,
          paddingTop: 2,
          paddingBottom: 2,
          color: "#ffffff",
          fontSize: 20,
          borderColor: "#1ED0BC",
          borderWidth: 2,
          borderRadius: 10
        },
        {
          type: "prefixText",
          x: 55,
          y: 792,
          color: "#FF3131",
          textAlign: "left",
          content: "100",
          tag: "￥",
          fontSize: 36,
          tagSize: 28
        },
        {
          type: "prefixText",
          x:
            ctx.getWidth({
              text: "100",
              fontSize: 36,
              returnPx: false
            }) +
            ctx.getWidth({
              text: "￥",
              fontSize: 28,
              returnPx: false
            }) +
            70,
          y: 792,
          color: "#999999",
          textAlign: "left",
          content: "200",
          tag: "￥",
          fontSize: 28,
          tagSize: 20,
          isDel: true,
          delColor: "#999999"
        }
      ])
      .then(res => {
        console.log("绘制完成")
      })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {}
})
